revision :
code:
<div id="one">
<h3>light/dark toggle button</h3>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">
<i class="fas fa-moon">🌝</i>
<i class="fas fa-sun">🌞</i>
<span class="ball"></span>
</label>
</div>
<style>
* {box-sizing: border-box;}
#one {font-family: "Montserrat", sans-serif; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; text-align: flex-start; min-height: 50vh; margin: 0; transition: background 0.2s linear;}
#one.dark {background-color: #292c35;} /* #9b59b6 */
#one.dark h3, #one.dark .support a {color: #fff;}
.checkbox { opacity: 0; position: absolute;}
.checkbox-label { background-color: #111; width: 3.3vw; height: 1.625vw; border-radius: 3.125vw; position: relative; padding: 0.3125vw;
cursor: pointer; display: flex; justify-content: space-between; align-items: center;}
.fa-moon {color: #f1c40f;}
.fa-sun {color: #f39c12;}
.checkbox-label .ball { background-color: #fff; width: 1.375vw; height: 1.375vw; position: absolute; left: 0.125vw; top: 0.125vw;
border-radius: 50%; transition: transform 0.2s linear;}
.checkbox:checked + .checkbox-label .ball { transform: translateX(1.55vw);}
</style>
<script>
const checkbox = document.getElementById("checkbox")
checkbox.addEventListener("change", () => {
document.getElementById("one").classList.toggle("dark")
})
</script>
code:
<div id="two">
<ul class="switches">
<li>
<input type="radio" id="light" name="theme-mode" checked>
<label for="light">
<span>Light</span>
<span></span>
</label>
</li>
<li>
<input type="radio" id="dark" name="theme-mode">
<label for="dark">
<span>Dark</span>
<span></span>
</label>
</li>
<li>
<input type="radio" id="auto" name="theme-mode">
<label for="auto">
<span>Auto</span>
<span></span>
</label>
</li>
</ul>
</div>
<style>
#two {font-family: "Montserrat", sans-serif; background-color: transparent; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; text-align: flex-start; min-height: 50vh; margin: 0; transition: background 0.2s linear;}
.switches{ --white-pearl: #ede1d2; --gray: #e8e8ec; --slate-gray: #789392; --white: #fff; --black: black; --text-color: var(--black);
--bg-color: var(--white);}
.theme-dark {color-scheme: dark; --text-color: var(--white);--bg-color: var(--black);}
ul {list-style: none;}
.switches { display: inline-block; padding: 0; border: 0.1vw solid var(--gray); margin: 0.625vw 0 0; border-radius: 0.375vw;}
.switches li { position: relative;}
.switches li:not(:last-child) {border-bottom: 0.0625vw solid var(--gray);}
.switches li [type="radio"] {position: absolute; left: -624.9375vw;}
.switches label { display: grid; grid-template-columns: 2.5vw auto; align-items: center; gap: 0.625vw; padding: 1.25vw; cursor: pointer;}
.switches span {flex-shrink: 0;}
.switches span:empty {position: relative; width: 3.125vw; height: 1.625vw; border-radius: 0.9375vw; background: var(--gray); transition: all 0.3s;}
.switches span:empty::before, .switches span:empty::after { content: ""; position: absolute;}
.switches span:empty::before {top: 0.0625vw; left: 0.0625vw; width: 1.7vw; height: 1.5vw; background: var(--slate-gray); border-radius: 50%;
z-index: 1; transition: transform 0.3s;}
.switches span:empty::after {top: 50%; transform: translateY(-50%); width: 0.875vw; height: 0.875vw; left: 0.375vw; background-size: 0.875vw 0.875vw;}
.switches [type="radio"]:checked + label span:empty {background: var(--white-pearl);}
.switches [type="radio"]:checked + label span:empty::before {transform: translateX(1.5vw);}
.switches li:nth-child(1) [type="radio"]:checked + label span:empty::after {content:"🌞"; transform: scale(1.5) translate(-10%, -70%);}
.switches li:nth-child(2) [type="radio"]:checked + label span:empty::after {content:"🌚"; transform: scale(1.5) translate(-10%, -70%);}
.switches li:nth-child(3) [type="radio"]:checked + label span:empty::after {content: "🌟";transform: scale(1.5) translate(-10%, -70%);}
</style>
<script>
const html = document.documentElement;
const switches = document.querySelector(".switches");
const inputs = switches.querySelectorAll("input");
if (localStorage.getItem("dark-mode")) {
html.classList.add("theme-dark");
}
if (localStorage.getItem("selected-radio")) {
switches.querySelector(`#${localStorage.getItem("selected-radio")}`).checked =
"true";
}
const setTheme = (theme) => {
if (theme === "dark") {
html.classList.add("theme-dark");
localStorage.setItem("dark-mode", "true");
} else {
html.classList.remove("theme-dark");
localStorage.removeItem("dark-mode");
}
};
const handleMediaChange = (e) => {
if (switches.querySelector('[type="radio"]:checked').id === "auto") {
setTheme(e.matches ? "dark" : "light");
}
};
const handleInputChange = (e) => {
const themeMode = e.target.id;
if (
themeMode === "dark" ||
(themeMode === "auto" &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
setTheme("dark");
} else {
setTheme("light");
}
localStorage.setItem("selected-radio", themeMode);
};
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", handleMediaChange);
inputs.forEach((input) => input.addEventListener("input", handleInputChange));
</script>